<template>
	<div class="bg-[#EFEFEF]">
		<div class="container py-5 mx-auto space-y-5">
			<div class="max-md:px-3">
				{{ lg === 0 ? "Your current location: Home > News" : lg === 1 ? "您当前的位置: 首页 > 新闻动态" : "您當前的位置: 首頁 > 新聞動態" }}
			</div>
			<div class="p-14 max-md:p-3 flex flex-col gap-5 bg-white">
				<div class="flex justify-start gap-5 overflow-x-auto">
					<!--   -->
					<div
						:class="index === active ? '!bg-[#C1A879]' : ''"
						class="flex-wrap px-6 py-2 text-white bg-gray-300 cursor-pointer"
						v-for="(i, index) in child"
						:key="index"
						@click="active = index"
					>
						<span class="whitespace-nowrap">{{ i.typename }}</span>
					</div>
				</div>
				<div v-for="(i, index) in list" :key="index" class="group flex gap-5 cursor-pointer" @click="goto(i)">
					<img :src="img + i.litpic" class="aspect-video max-md:w-1/3 w-1/5" alt="" />
					<div class="flex flex-col justify-around">
						<span class="text-base hidden-1 group-hover:text-[#C1A879]">{{ i.title }}</span>
						<span class="text-gray-500">{{ i.update_time | formatTime }}</span>
						<p class="hidden-2 text-gray-500">
							{{ i.seo_description }}
						</p>
					</div>
				</div>
				<div class="flex justify-center w-full mt-10" v-if="list.length">
					<el-pagination background layout="prev, pager, next" :total="totalRows" @current-change="handleCurrentChange"> </el-pagination>
				</div>
				<div class="flex flex-col items-center justify-center w-full gap-3" v-if="empty">
					<img src="https://dsfw.oss-cn-shanghai.aliyuncs.com/baolian/202309121947204.png" class="aspect-square" style="height: 250px" alt="" />
					<span class="text-sm">{{ lg === 0 ? "No article" : lg === 1 ? "暂无文章" : "暫無文章" }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			child: [],
			active: 0,
			typeid: "",
			list: [],
			empty: false,
			page: 1,
			limit: 4,
			totalRows: 0
		};
	},
	created() {
		this.typeid = this.$route.query.id;
		this.index();
	},

	watch: {
		//
		active(newValue, oldValue) {
			this.typeid = this.child[this.active].id;

			history.pushState({}, "", window.location.origin + `/new?id=${this.typeid}&lang=${this.lg ? "cn" : "en"}`);
			this.page = 1;

			this.get_xq();
		},
		"$route.query.id"(newValue, oldValue) {
			this.typeid = newValue;
			this.index();
		}
	},
	methods: {
		//
		handleCurrentChange(e) {
			this.page = e;
			this.get_xq();
		},
		async goto(e) {
			this.$router.push(`/new_detail?typeid=${e.typeid}&aid=${e.aid}&lang=${this.lg ? "cn" : "en"}`);
		},
		async index() {
			const [err, res] = await this.$to(this.$axios.get("&a=menu"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			res.data.forEach((e) => {
				if (e.url === "/new") {
					this.child = e.child;
					this.typeid = this.typeid || e.child[0].id;
				}
			});

			if (this.typeid) {
				this.active = this.child.findIndex((e) => {
					return e.id == this.typeid;
				});
			}
			this.get_xq();
		},
		async get_xq() {
			const obj = {
				page: this.page,
				limit: this.limit,
				a: "article_list",
				typeid: this.typeid
			};

			const queryString = new URLSearchParams(obj).toString();
			const [err, res] = await this.$to(this.$axios.get(`&${queryString}`));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.list = res.data.list;
			this.totalRows = res.data.page.totalRows;

			if (res.data.list.length === 0) {
				this.empty = true;
			} else {
				this.empty = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>
